<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Example</title>

    <style>
        #header {
            text-align: center;
            padding: 5px;
        }

        #left {
            position: absolute;
            width: 50%;
            height: 100%;
        }

        #right {
            margin-left: 50%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="header">
        <h2>Title</h2>
    </div>

    <div id="time" align="right"></div>

    <hr />

    <div>
        <label class="pid"></label>
        <div />
        <button id='onSaveConfig' onclick="onSaveConfig()">saveConfig</button>
        <button id='onClearConfig' onclick="onClearConfig()">clearConfig</button>
        <button id='gc' onclick="onGC()">garbageCollection</button>
        <button id='exit' onclick="onExit()">exit</button>
    </div>

    <hr />

    <div>
        <label>Test</label>
        <input id='test' value='你好test' type="text">
        <button id='onTest' onclick="onTest($('#test').val())">test</button>
    </div>

    <hr />

    <div>
        <label>output log1</label>
        <input id='input1' value='test1' type=" text">
            <button id='outputLog1' onclick="output($('#input1').val())">outputLog1</button>

            <label>output log2</label>
            <input id='input2' value='test2' type="text">
            <button id='outputLog2' onclick="output($('#input2').val(),'#log2')">outputLog2</button>
    </div>

    <hr />

    <div id="left">
        <div class="page-header">
            <h2>Log</h2>
        </div>
        <button id='clear1' onclick="onClear()">clear</button>
        <pre id="log1"></pre>
    </div>

    <div id="right">
        <div class="page-header">
            <h2>Log2</h2>
        </div>
        <button id='clear2' onclick="onClear('#log2')">clear</button>
        <pre id="log2"></pre>
    </div>

    <script src='js/jquery-3.6.4.min.js'></script>
    <script src='js/dayjs.min.js'></script>
    <script>
        setInterval(()=>{
            $('#time').text(dayjs().format("YYYY-MM-DD HH:mm:ss.SSS"));
        },1000);

        $.get("pid", function (pid) {
            $(".pid").html("pid: " + pid);
        });
             
        if(localStorage.getItem("test")){
            $('#test').val(localStorage.getItem("test"));
        }

        function onSaveConfig() {
            localStorage.setItem("test", $('#test').val());
            output("save config");
        }

        function onClearConfig() {
            localStorage.clear();
            output("clear config");
        }

        function output(str, id = '#log1') {
            let result = dayjs().format("YYYY-MM-DD HH:mm:ss.SSS");
            $(id).append(result + " - " + str + "\n");
        }

        function onClear(id = '#log1') {
            $(id).text("");
        }

        function onTest(str) {
            $.get("test/" + encodeURI(str), function (result) {
                output(result);
            });
        }

        function onGC() {
            $.get("gc", function (result) {
                output(result);
            });
        }

        function onExit() {
            $.get("exit", function (result) {
                output(result);
            });
        }
    </script>

</body>

</html>
